﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Table</title>
		<link rel="stylesheet" href="css/layui.css" media="all" />
		<link rel="stylesheet" href="css/global.css" media="all">
		<link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/table.css" />
	</head>

	<body>
		<div class="admin-main">

			<blockquote class="layui-elem-quote">
				<a href="javascript:;" class="layui-btn layui-btn-small" id="add">
					<i class="layui-icon">&#xe608;</i> 添加信息
				</a>
				<a href="#" class="layui-btn layui-btn-small" id="import">
					<i class="layui-icon">&#xe608;</i> 导入信息
				</a>
				<a href="#" class="layui-btn layui-btn-small">
					<i class="fa fa-shopping-cart" aria-hidden="true"></i> 导出信息
				</a>
				<a href="#" class="layui-btn layui-btn-small" id="getSelected">
					<i class="fa fa-shopping-cart" aria-hidden="true"></i> 获取全选信息
				</a>
				<a href="javascript:;" class="layui-btn layui-btn-small" id="search">
					<i class="layui-icon">&#xe615;</i> 搜索
				</a>
			</blockquote>
			<fieldset class="layui-elem-field">
				<legend>数据列表</legend>
				<div class="layui-field-box layui-form">
					<table class="layui-table admin-table">
						<thead>
							<tr>
								<th style="width: 30px;"><input type="checkbox" lay-filter="allselector" lay-skin="primary"></th>
								<th>姓名</th>
								<th>账户</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="content">
						</tbody>
					</table>
				</div>
			</fieldset>
			<div class="admin-table-page">
				<div id="paged" class="page">
				</div>
			</div>
		</div>
		<!--模板-->
		<script type="text/html" id="tpl">
			{{# layui.each(d.result, function(index, item){ }}
			<tr>
				<td><input type="checkbox" lay-skin="primary"></td>
				<td>{{ item.name }}</td>
				<td>{{ item.username }}</td>
				<td>
					<a href="javascript:;" data-id="{{ item.id }}" data-opt="preview" class="layui-btn layui-btn-normal layui-btn-mini">预览</a>
					<a href="javascript:;" data-id="{{ item.id }}" data-opt="edit" class="layui-btn layui-btn-mini">编辑</a>
					<a href="javascript:;" data-id="{{ item.id }}" data-opt="del" class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
				</td>
			</tr>
			{{# }); }}
		</script>
		<script type="text/javascript" src="layui.js"></script>
		<script>
			layui.config({
				base: 'js/'
			});

			layui.use(['paging', 'form'], function() {
				var $ = layui.jquery,
					paging = layui.paging(),
					layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
					layer = layui.layer, //获取当前窗口的layer对象
					form = layui.form();

                paging.init({
                    openWait: true,
                    url: '/back/user/page', //地址
					elem: '#content', //内容容器
					params: { //发送到服务端的参数
					},
					type: 'GET',
					tempElem: '#tpl', //模块容器
					pageConfig: { //分页参数配置
						elem: '#paged', //分页容器
						pageSize: 9 //分页大小
					},
					success: function() { //渲染成功的回调
						//alert('渲染成功');
					},
					fail: function(msg) { //获取数据失败的回调
						//alert('获取数据失败')
					},
					complate: function() { //完成的回调
						//alert('处理完成');
						//重新渲染复选框
						form.render('checkbox');
						form.on('checkbox(allselector)', function(data) {
							var elem = data.elem;

							$('#content').children('tr').each(function() {
								var $that = $(this);
								//全选或反选
								$that.children('td').eq(0).children('input[type=checkbox]')[0].checked = elem.checked;
								form.render('checkbox');
							});
						});

						//绑定所有编辑按钮事件						
						$('#content').children('tr').each(function() {
							var $that = $(this);
							$that.children('td:last-child').children('a[data-opt=edit]').on('click', function() {
								$.get('/back/user/'+$(this).data('id'), null, function(data) {
									var result = data.result;
									$.get('user/edit', null, function(form) {
										layer.open({
											type: 1,
											title: '编辑用户',
											content: form,
											btn: ['保存', '取消'],
											shade: false,
											offset: ['100px', '30%'],
											area: ['600px', '400px'],
											zIndex: 19950924,
											maxmin: true,
											yes: function(index) {
												//触发表单的提交事件
												$('form.layui-form').find('button[lay-filter=edit]').click();
											},
											full: function(elem) {
												var win = window.top === window.self ? window : parent.window;
												$(win).on('resize', function() {
													var $this = $(this);
													elem.width($this.width()).height($this.height()).css({
														top: 0,
														left: 0
													});
													elem.children('div.layui-layer-content').height($this.height() - 95);
												});
											},
											success: function (layero, index) {
												var form = layui.form();
												form.render();
												setFromValues(layero,result);
												layero.find(":input[name='username']").attr("disabled","");
												form.on('submit(edit)', function(data) {
													$.ajax({
														url:'/back/user/'+result.id,
														type:'put',
														data: data.field,
														dataType: "json",
														success:function () {
															layerTips.msg('更新成功');
															layerTips.close(index);
															location.reload();
														}

													});
													//这里可以写ajax方法提交表单
													return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
												});
											}
										});
									});
								});
							});
							$that.children('td:last-child').children('a[data-opt=del]').on('click', function() {
								var id = $(this).data('id');
								layer.confirm('确定删除数据吗？',null, function(index){
									$.ajax({
										url: "/back/user/"+id,
										type: "DELETE",
										success: function(data){
											console.log(data);
											if(data.rel==true){
												layerTips.msg("移除成功！");
												location.reload();
											}else{
												layerTips.msg("移除失败！")
												location.reload();
											}
										}
									});
									layer.close(index);
								});
							});
							$that.children('td:last-child').children('a[data-opt=preview]').on('click', function() {
								$.get('/back/user/'+$(this).data('id'), null, function(data) {
									var result = data.result;
									$.get('user/edit', null, function(form) {
										layer.open({
											type: 1,
											title: '预览用户',
											content: form,
											shade: false,
											offset: ['100px', '30%'],
											area: ['600px', '400px'],
											zIndex: 19950924,
											maxmin: true,
											yes: function(index) {
												//触发表单的提交事件
												$('form.layui-form').find('button[lay-filter=edit]').click();
											},
											full: function(elem) {
												var win = window.top === window.self ? window : parent.window;
												$(win).on('resize', function() {
													var $this = $(this);
													elem.width($this.width()).height($this.height()).css({
														top: 0,
														left: 0
													});
													elem.children('div.layui-layer-content').height($this.height() - 95);
												});
											},
											success: function (layero, index) {
												var form = layui.form();
												form.render();
												layero.find(":input").attr("disabled","");
												setFromValues(layero,result);
											}
										});
									});
								});
							});
						});

					},
				});
				//获取所有选择的列
				$('#getSelected').on('click', function() {
					var names = '';
					$('#content').children('tr').each(function() {
						var $that = $(this);
						var $cbx = $that.children('td').eq(0).children('input[type=checkbox]')[0].checked;
						if($cbx) {
							var n = $that.children('td:last-child').children('a[data-opt=edit]').data('name');
							names += n + ',';
						}
					});
					layer.msg('你选择的名称有：' + names);
				});

				$('#search').on('click', function() {
					parent.layer.alert('你点击了搜索按钮')
				});

				var addBoxIndex = -1;
				$('#add').on('click', function() {
					if(addBoxIndex !== -1)
						return;
					//本表单通过ajax加载 --以模板的形式，当然你也可以直接写在页面上读取
					$.get('user/edit', null, function(form) {
							addBoxIndex = layer.open({
							type: 1,
							title: '添加用户',
							content: form,
							btn: ['保存', '取消'],
							shade: false,
							offset: ['100px', '30%'],
							area: ['600px', '400px'],
							zIndex: 19950924,
							maxmin: true,
							yes: function(index) {
								//触发表单的提交事件
								$('form.layui-form').find('button[lay-filter=edit]').click();
							},
							full: function(elem) {
								var win = window.top === window.self ? window : parent.window;
								$(win).on('resize', function() {
									var $this = $(this);
									elem.width($this.width()).height($this.height()).css({
										top: 0,
										left: 0
									});
									elem.children('div.layui-layer-content').height($this.height() - 95);
								});
							},
							success: function(layero, index) {
								var form = layui.form();
								form.render();
								form.on('submit(edit)', function(data) {
									$.ajax({
										url:'/back/user',
										type:'post',
										data: data.field,
										dataType: "json",
										success:function () {
											layerTips.msg('保存成功');
											layerTips.close(index);
											location.reload();
										}

									});
									//这里可以写ajax方法提交表单
									return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
								});
								//console.log(layero, index);
							},
							end: function() {
								addBoxIndex = -1;
							}
						});
					});
				});

				$('#import').on('click', function() {
					var that = this;
					var index = layer.tips('只想提示地精准些', that, { tips: [1, 'white'] });
					$('#layui-layer' + index).children('div.layui-layer-content').css('color', '#000000');
				});
			});
			function setFromValues(el, data)
			{
				for (var p in data)
				{
					el.find(":input[name='" + p + "']").val(data[p]);
				}
			}
		</script>
	</body>

</html>